// 统一的注册所有的全局组件
import XtxSkeleton from '@/components/XtxSkeleton/XtxSkeleton.vue'
import XtxCarousel from '@/components/XtxCarousel/XtxCarousel.vue'
import XtxMore from '@/components/XtxMore/XtxMore.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import XtxBread from './XtxBread/XtxBread.vue'
import XtxBreadItem from './XtxBread/XtxBreadItem.vue'
import XtxCity from '@/components/XtxCity/XtxCity.vue'
import XtxNumbox from '@/components/XtxNumbox/XtxNumbox.vue'
import XtxButton from '@/components/XtxButton/XtxButton.vue'
import XtxCheckbox from '@/components/XtxCheck/XtxCheck.vue'
import XtxMessage from '@/components/XtxMessage/XtxMessage.vue'

import XtxDialog from '@/components/XtxDialog/XtxDialog.vue'
import XtxSwitch from '@/components/XtxSwitch/XtxSwitch.vue'

export default {
  install (app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('XtxMore', XtxMore)
    app.component('XtxCarousel', XtxCarousel)
    app.component('XtxBread', XtxBread)
    app.component('XtxBreadItem', XtxBreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckbox', XtxCheckbox)
    app.component('XtxMessage', XtxMessage)
    app.component('XtxDialog', XtxDialog)
    app.component('XtxSwitch', XtxSwitch)

    app.directive('lazy', {
      mounted (el:HTMLImageElement, { value }) {
        console.log(el, value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = value
            stop()
          }
        })
      }
    })
  }
}
